<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onTableRefresh('cus_name')">
		<cl-pagefull @resize="onResize">
			<template #head>
				<cl-title-module
					:print="printParams"
					:border="false"
					align="top"
					:columns="initColumns"
					v-model="table.columns"
					@export-file="exportExcel"
				>
					<el-row type="flex">
						<cl-filter-group v-model="search">
							<cl-filter label="所属事业部">
								<cl-select
									v-model="search.biz_id"
									placeholder="请选择"
									filterable
									@change="changeBiz"
								>
									<el-option
										v-for="item in business"
										:key="item.biz_id"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="品牌">
								<cl-select
									v-model="search.bra_id"
									placeholder="全部"
									filterable
									style="width: 150px"
									clearable
									multiple
									collapse-tags
									@change="refresh()"
								>
									<el-option
										v-for="item in bizRefData.brand"
										:key="item.bra_id"
										:label="item.bra_name"
										:value="item.bra_id"
									/>
								</cl-select>
							</cl-filter>
							<cl-filter label="门店">
								<cl-shop-select
									v-model="search.shop_id"
									placeholder="请选择"
									filterable
									clearable
									@change="refresh()"
									show-all
									:biz_id="search.biz_id"
								/>
							</cl-filter>
							<!-- <cl-filter label="所属部门">
								<cl-cascader
									clearable
									v-model="search.dept_ids"
									:options="deptList"
									collapse-tags
									style="min-width: 230px"
									:props="{
										multiple: true,
										value: 'dept_id',
										label: 'dept_name'
									}"
									filterable
									@change="changeDept"
								/>
							</cl-filter> -->
							<!-- <cl-filter label="所属人员">
								<cl-select
									v-model="search.user_id"
									placeholder="请选择"
									filterable
									style="width: 150px"
									clearable
									@change="refresh()"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in userList"
										:key="item.user_id"
										:label="item.user_name"
										:value="item.user_id"
									/>
								</cl-select>
							</cl-filter> -->
							<!-- <cl-filter label="来源渠道">
								<cl-select
									v-model="search.channel_id"
									placeholder="请选择"
									filterable
									style="width: 150px"
									clearable
									@change="refresh()"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in sourceList"
										:key="item.id"
										:label="item.cname"
										:value="item.id"
									/>
								</cl-select>
							</cl-filter> -->
							<cl-filter label="审核状态">
								<cl-select
									v-model="search.state"
									placeholder="请选择"
									style="width: 150px"
									clearable
									@change="refresh()"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="(item, index) in optionsStatus"
										:key="index"
										:label="item.label"
										:value="item.value"
									>
									</el-option>
								</cl-select>
							</cl-filter>
							<cl-filter label="客户关键字">
								<el-input
									v-model="search.cus_name"
									placeholder="手机号/微信号/客户名称/会员号"
									clearable
									style="width: 250px"
									@change="refresh()"
								/>
							</cl-filter>
							<cl-filter label="消费时间">
								<cl-date-picker
									v-model="search.time"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd"
									style="width: 210px"
									@change="refresh()"
								/>
							</cl-filter>
							<cl-filter label="当前处理人">
								<cl-select
									v-model="search.oa_user_id"
									placeholder="请选择"
									filterable
									style="width: 200px"
									clearable
									@change="refresh()"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in oaUserList"
										:key="item.user_id"
										:label="item.user_name"
										:value="item.user_id"
									/>
								</cl-select>
							</cl-filter>

							<cl-filter label="申请退款时间">
								<cl-date-picker
									v-model="search.time1"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd"
									style="width: 210px"
									@change="refresh()"
								/>
							</cl-filter>
							<cl-filter label="打款时间">
								<cl-date-picker
									v-model="search.time2"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd"
									style="width: 210px"
									@change="refresh()"
								/>
							</cl-filter>
						</cl-filter-group>
					</el-row>
				</cl-title-module>
			</template>
			<cl-table id="finRefundmoney" v-bind="table">
				<template #column-actual_money="{ scope: { row } }">
					<span style="color: red">{{ row.actual_money }}</span>
				</template>
				<!-- <template #column-teacher_achieve="{ scope: { row } }">
					<div v-for="(item, index) in row.teacher_achieve" :key="index">
						{{ item.teacher_name }}：{{ item.teacher_achieve }}
					</div>
				</template> -->
				<template #column-opt="{ scope: { row } }">
					<div class="flex flex-align-start flex-justify-center">
						<el-button type="primary" @click="openDetail(row)"> 详情 </el-button>
						<el-button
							type="danger"
							v-auth="'store_cusdetailindex_look'"
							@click="openCusDetail(row)"
						>
							查看
						</el-button>
						<!-- <template v-if="!row.oa_id">
							<el-dropdown
								class="ml-1"
								size="medium"
								@command="(command) => onCommand(command, row)"
								v-if="![0, 5].includes(row.state)"
							>
								<el-button>
									更多<i class="el-icon-arrow-down el-icon--right" />
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<template v-if="row.state != 4">
										<el-dropdown-item command="approve">通过</el-dropdown-item>
										<el-dropdown-item command="reject">驳回</el-dropdown-item>
									</template>
									<el-dropdown-item command="remit" v-if="row.state == 4"
										>打款</el-dropdown-item
									>
								</el-dropdown-menu>
							</el-dropdown>
						</template> -->
					</div>
				</template>
				<cl-empty slot="empty" />
			</cl-table>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<!-- 详情 -->
		<refund-detail ref="detail" />
		<!-- 打款 -->
		<refund-remit ref="remit" @success="refresh()" />
	</cl-crud>
</template>

<script>
import { exportJsonToExcel } from "@/utils/excel";
import { cloneDeep } from "cl-admin/utils";
import { mapState } from "vuex";
import RefundDetail from "./components/refund-detail";
import RefundRemit from "./components/refund-remit";
import dayjs from "dayjs";
import pageMinix from "@/mixins/page"
const statusType = {
	0: { text: "已驳回" },
	1: { text: "审核中" },
	2: { text: "待审核" },
	3: { text: "取消退款" },
	4: { text: "未打款" },
	5: { text: "已打款" }
};
const filterYn = (val, key = "text") => {
	return statusType[val] ? statusType[val][key] : "";
};
export default {
	name: "Financerefundmoney",
	inject: ["$layout"],
	mixins: [pageMinix],
	components: {
		RefundDetail,
		RefundRemit
	},
	data() {
		return {
			printParams: {
				id: "afterRefundmoney",
				popTitle: "退款"
			},
			search: {
				biz_id: "", //事业部
				role_type: 2,
				cus_name: "",
				// dept_id: "",
				dept_ids: [],
				bra_id: [],
				shop_id: "",
				oa_user_id: "",
				user_id: "", // 所属人员
				channel_id: "", // 来源渠道
				time: [], // 下定时间
				time1: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")], // 退定时间
				time2: [], // 打款时间
				state: "" // 审核状态
			},
			optionsStatus: [
				// { value: 2, label: "待审核" },
				// { value: 4, label: "未打款" },
				// { value: 5, label: "已打款" },
				// { value: 0, label: "已驳回" }
				{ value: 1, label: "审核中" },
				{ value: 3, label: "已拒绝" },
				{ value: 5, label: "已打款" }
			],
			table: {
				ref: "table",
				"context-menu": ["refresh()"],
				columns: [],
				props: {
					maxHeight: 500
				}
			},
			initColumns: [
				{ label: "序号", type: "index", width: 50, fixed: true, disable: true },
				{ label: "消费时间", prop: "order_time", width: 100 },
				{ label: "申请退款时间", prop: "create_time", width: 150 },
				{ label: "打款时间", prop: "payment_date", width: 100 },
				{
					label: "事业部",
					prop: "biz_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "品牌",
					prop: "bra_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "门店",
					prop: "store_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "预约人",
					prop: "cart_user_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "归属店长",
					prop: "manage_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "操作老师",
					prop: "teachers",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "销售老师",
					prop: "sell_teachers",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "到店类型",
					prop: "cus_type",
					width: 100,
					formatter: row => this.$constFilter(row.cus_type, "CUS_TYPE")
				},
				{ label: "客户号", prop: "refund_user_id", width: 100 },
				{
					label: "客户名称",
					prop: "refund_user_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "实际成本", prop: "costmoney", width: 120 },
				{ label: "退款成本", prop: "refund_cost", width: 120 },
				{ label: "订单总额（￥）", prop: "pay_amount", width: 120 },
				{ label: "实付金额（￥）", prop: "real_amount", width: 120 },
				{ label: "申请退款金额（￥）", prop: "refund_money", width: 150 },
				{
					label: "实际退款金额（￥）",
					prop: "actual_money",
					width: 150,
					style: {
						head: {
							color: "ff0000"
						}
					}
				},
				{ label: "截留金额（￥）", prop: "interception", width: 150 },
				{
					label: "消费项目",
					prop: "projects",
					minWidth: 250,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "退款项目",
					prop: "refund_projects",
					minWidth: 250,
					align: "left",
					showOverflowTooltip: true
				},
				// { label: "类目", prop: "prod_nam", minWidth: 220 },
				{
					label: "提交人",
					prop: "add_user_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "退款类型",
					prop: "refund_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "退款原因",
					prop: "detail",
					minWidth: 300,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "收款银行", prop: "bank_type_name", width: 180 },
				{
					label: "卡号",
					prop: "back_account",
					width: 200,
					formatter: row => `${row.back_account}`
				},
				{
					label: "收款人",
					prop: "bank_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "审核状态",
					prop: "state",
					minWidth: 150,
					formatter: row => {
						if (row.state == 2 && row.submit_num > 1) {
							return "待审核（重新退回）";
						}
						return filterYn(row.state);
					}
				},
				{
					label: "当前处理人",
					prop: "oa_user",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "打款状态",
					width: 100,
					formatter: row => (row.state == 5 ? "已打款" : "未打款")
				},
				{
					label: "退回状态",
					width: 100,
					formatter: row =>
						row.state == 5 ? "已退回" : row.state == 3 ? "取消退款" : "退回中"
				},
				// {
				// 	label: "技师业绩",
				// 	prop: "teacher_achieve",
				// 	minWidth: 150,
				// 	formatter: row => {
				// 		return (row.teacher_achieve || [])
				// 			.map(v => `${v.teacher_name}：${v.teacher_achieve}`)
				// 			.join("，");
				// 	}
				// },
				{
					label: "业绩备注",
					prop: "achieve_remark",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "排店人员",
					prop: "order_user_name",
					width: 120,
				},
				{ label: "操作", prop: "opt", width: 150, fixed: "right", disable: true }
			],
			// 部门
			deptList: [],
			userList: [],
			// 来源渠道
			sourceList: [],
			// oa审批人列表
			oaUserList: []
		};
	},

	computed: {
		...mapState("common", ["visibleCusDetail", "cusFormSubmit", "refundState"]),
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	watch: {
		visibleCusDetail(v) {
			if (!v && this.zmComponentIsActive) {
				this.refresh(false);
			}
		},
		cusFormSubmit(v) {
			if (v && this.zmComponentIsActive) {
				this.refresh();
			}
		},
		refundState(v) {
			if (v && this.zmComponentIsActive) {
				this.refresh();
			}
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		const { initColumns } = this;
		this.table.columns = cloneDeep(initColumns);
		this.init();
	},
	filters: { filterYn },
	methods: {
		filterYn,
		onLoad({ ctx, app }) {
			ctx.service(this.$service.orderrefund)
				.set("dict", {
					api: {
						page: "refundList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.getBizRefShop(biz_id);
			this.getOaUserList();
		},
		// async initData() {
		// 	this.getSourceList();
		// 	this.getUserList();
		// 	const { biz_id } = this.search;
		// 	this.deptList =
		// 		delEmptyChildren(
		// 			await this.$store.dispatch("common/getDept", { biz_id, needCascader: true })
		// 		) || [];
		// },

		changeBiz() {
			this.search = {
				...this.search,
				dept_ids: [],
				user_id: "",
				bra_id: [],
				channel_id: "",
				shop_id: ""
			};
			this.init();
			this.refresh();
		},
		changeDept() {
			this.search.user_id = "";
			this.getUserList();
			this.refresh();
		},
		//查看
		openCusDetail(row) {
			row.cus_id = row.refund_user_id;
			this.$layout.openCusDetail(row, "order");
		},
		// 详情
		openDetail(row) {
			if (row.oa_id) {
				this.$layout.oaRefundDetail(row, () => {
					this.refresh(false);
				});
				return;
			}
			this.$refs.detail.open(row);
		},
		// 更多
		onCommand(command, row) {
			if (command === "remit") {
				this.$refs.remit.open(row);
				return;
			}
			this[command](row);
		},
		//通过
		approve(row) {
			this.optConfirm({
				title: "通过",
				label: "通过备注",
				placeholder: "请输入通过备注",
				row,
				operate_state: 4
			});
		},
		//驳回
		reject(row) {
			this.optConfirm({
				title: "驳回",
				label: "驳回备注",
				placeholder: "请输入驳回备注",
				row,
				operate_state: 0
			});
		},
		// 操作确认
		optConfirm({ title, label, placeholder, message, row, operate_state }) {
			this.$crud.openForm({
				title,
				width: "500px",
				props: { "label-position": "top" },
				items: [
					{
						label,
						prop: "operate_mes",
						component: {
							name: "el-input",
							attrs: { placeholder },
							props: { type: "textarea", rows: 3 }
						},
						rules: {
							required: !operate_state ? true : false,
							message: message || placeholder
						}
					}
				],
				op: { saveButtonText: "提交" },
				on: {
					submit: async (data, { close, done }) => {
						this.$store.commit("common/SET_REFUND_STATE", false);
						try {
							const { id } = row;
							await this.$service.orderrefund.routineoperate({
								...data,
								operate_state,
								refund_id: id
							});
							this.$message.success("操作成功");
							this.$store.commit("common/SET_REFUND_STATE", true);
							close();
						} catch (error) {
							console.log(error);
							done();
						}
					}
				}
			});
		},
		// oa审批人列表
		async getOaUserList() {
			const res = await this.$service.oa.user();
			this.oaUserList = res || [];
		},
		// 获取归属人列表
		async getUserList() {
			const { biz_id } = this.search;
			let dept_id = this.search.dept_ids.join();
			this.userList = [];
			if (!biz_id) return;
			const { data } = await this.$service.user.list({
				biz_id,
				dept_id
				// post: 1
			});
			this.userList = data;
		},
		//获取来源渠道
		async getSourceList() {
			const { biz_id } = this.search;
			this.sourceList = [];
			if (!biz_id) return;
			const data = await this.$service.source.list({ biz_id });
			this.sourceList = data;
		},
		exportExcel() {
			// exportExcel("#finRefundmoney");
			const table = this.$refs.table;
			exportJsonToExcel(table.columns, table.data);
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep {
	.title-module {
		margin-bottom: 0;
		padding-bottom: 0;
		&::-webkit-scrollbar {
			height: 6px;
		}
		&::-webkit-scrollbar-thumb {
			background-color: rgba(144, 147, 153, 0.3);
			border-radius: 5px;
		}
		&::-webkit-scrollbar-track {
			background: transparent;
		}
	}
}
</style>
